<template>
  <div class="article">
    <div class="article-wrap">
      <!-- <div class="article-nav"></div> -->
      <div class="filter-container">
        <div class="selection-wrap">
          <span>当前选择</span>
          <div class="selections" v-if="filterFlag">
            <div v-for="(filterType,index) of filterTypeList" v-if="filterType.defaultSelect != 0" :key="filterType.id"><span class="label">{{filterType.list[filterType.defaultSelect]}}</span><span class="close" @click="closeTypeDefault(index)">X</span></div>
          </div>
          <div class="selections-empty" v-else>暂无</div>
        </div>
        <div class="filter-wrap">
          <div class="filter-item" v-for="filterType of filterTypeList" :key="filterType.id">
            <div class="filter-title">{{filterType.nameCh}}</div>
            <div class="filter-box">
              <span v-for="(item,index) of filterType.list" :class="{'active':filterType.defaultSelect == index}" :key="index" @click="handleSelectFilter(index,filterType.id)">{{item}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="scroll-container">
        <mescroll-vue ref="articleList" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <div class="article-list">
            <div class="article-item" v-for="article of articleList" :key="article._id" @click="handleArticleClick(article._id)">
              <div class="info">
                <div class="title">{{article.title}}</div>
                <div class="content">{{article.content}}</div>
                <div class="date-view">
                  <div class="date"><i class="kkIcon-clock"></i><span>{{article.modifyDate | formatDate}}</span></div>
                  <div class="views"><i class="kkIcon-eye"></i><span>{{article.views}}</span></div>
                </div>
              </div>
              <div class="img" v-if="article.img"></div>
              <div class="item-tip" v-if="article.isRecommended"><span>top</span></div>
            </div>
            <div class="fix-item" v-for="i of fixItems"></div>
          </div>
        </mescroll-vue>
      </div>
    </div>
  </div>
  
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import axios from 'axios';
import utils from '../../utils/util';
export default {
  data(){
    return{
      mescroll: null,
      mescrollDown:{},
      mescrollUp: {
        callback: this.upCallback
      },
      filterTypeList:[
        {
          id:1,
          nameEn:'type',
          nameCh:'类型',
          defaultSelect:1,
          list:['全部','原创','转载']
        },
        {
          id:2,
          nameEn:'date',
          nameCh:'时间',
          defaultSelect:0,
          list:['全部','一周内','一个月内','一年内']
        },
        {
          id:3,
          nameEn:'tag',
          nameCh:'标签筛选',
          defaultSelect:0,
          list:['全部','js','css','html','vue','react','nodejs','vue']
        }
      ],
      articleList:[]
    }
  },
  async asyncData({app}) {
    
  },
  components:{
    MescrollVue
  },
  computed:{
    //是否有筛选条件
    filterFlag(){
      let flag = this.filterTypeList.filter((item)=>{
        return item.defaultSelect !=0
      })
      return flag.length>0
    },
    //flex列表末尾空白元素填充
    fixItems(){
      return (3 - this.articleList.length%3)
    }
  },
  filters:{
    formatDate:utils.formatDate
  },
  methods: {
    mescrollInit (mescroll) {
      this.mescroll = mescroll
    },
    upCallback (page, mescroll) {
      console.log('page',mescroll)
      this.$axios.$post('/articles/getArticleList').then((res)=>{
        console.log('res',res)
        if(res.code == 200){
          let articleList = res.data.list;
          this.articleList = this.articleList.concat(articleList)
          this.$nextTick(() => {
            mescroll.endBySize(this.articleList.length,res.data.totalCount)
          })
        }
      })
    },
    closeTypeDefault(index){
      this.$set(this.filterTypeList[index],'defaultSelect',0)
    },
    handleSelectFilter(index,id){
      let neededIndex = this.filterTypeList.indexOf(
        this.filterTypeList.filter((item)=>{
          return item.id == id
        })[0]
      )
      this.$set(this.filterTypeList[neededIndex],'defaultSelect',index)
    },
    handleArticleClick(id){
      console.log(id)
      this.$router.push({
        name:'article-id',
        params:{
          id:id
        }
      })
    }
  },
}
</script>

<style lang="less">
.article{
  width:100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &-wrap{
    width:1000px;
    padding:10px;
    box-sizing: border-box;
    height: calc(100% - 20px);
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    &-nav{
      height: calc(6vw - 10px);
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .filter-container{
      width:100%;
      .selection-wrap{
        width:100%;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &>span{
          flex:0 0 80px;
          padding:0 10px;
          font-size: 16px;
          font-weight: 600;
          text-align: justify;
          text-align-last: justify;
        }
        &>.selections{
          flex:1 auto;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          &>div{
            height: 28px;
            border-radius: 5px;
            line-height: 28px;
            padding:0 8px;
            border:1px solid #1890FF;
            box-sizing: border-box;
            position: relative;
            margin-right: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover{
              padding:0 28px 0 8px;
              transition: all 0.1s ease-in-out;
            }
            &>.label{
              color: #1890FF;
            }
            &>.close{
              cursor: pointer;
              position:absolute;
              top: 28px;
              right:2px;
              width:18px;
              height: 18px;
              line-height: 18px;
              margin-left: 5px;
              border-radius: 9px;
              font-size: 12px;
              color: #ffffff;
              background: #1890FF;
              text-align: center;
            }
            &:hover>.close{
              top: 5px;
              transition: all 0.2s ease-in-out;
            }
          }
        }
        .selections-empty{
          font-size: 16px;
          font-weight: 600;
          margin: 0 10px;
        }
      }
      .filter-wrap{
        width:100%;
        .filter-item{
          width:100%;
          line-height: 36px;
          display: flex;
          align-items: flex-start;
          .filter-title{
            flex:0 0 80px;
            padding:0 10px;
            text-align: justify;
            text-align-last: justify;
            color: #999999;
          }
          .filter-box{
            flex:1 auto;
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            &>span{
              margin: 0 10px;
              cursor: pointer;
              &.active{
                color:#1890FF;
              }
            }
          }
        }
      }
    }
    .scroll-container{
      overflow: hidden;
      height:calc(100vh - 200px);
      .article-list{
        width:100%;
        display: flex;
        justify-content: space-around;
        align-content: flex-start;
        flex-wrap: wrap;
        .article-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding:10px;
          width:300px;
          height: 120px;
          border: 2px solid #ebebeb;
          box-sizing: border-box;
          border-radius: 10px;
          margin: 12px 0;
          cursor: pointer;
          position: relative;
          &>.item-tip{
            position: absolute;
            top: -2px;
            right: -2px;
            width:0;
            height: 0;
            border-radius:0 8px 0 0;
            border-top:24px solid #f03;
            border-right:24px solid #f03;
            border-bottom:24px solid transparent;
            border-left:24px solid transparent;
            &>span{
              position: absolute;
              top: -16px;
              right: -20px;
              color: #fff;
              transform: rotate(45deg);
            }
          }
          &:hover{
            border: 2px solid #1890ff;
            &::before,
            &::after {
              content: "";
              position: absolute;
              top: -10px;
              left: -10px;
              right: -10px;
              bottom: -10px;
              border: 2px solid #1890ff;
              transition: all .5s;
              animation: clippath 3s infinite linear;
              border-radius: 10px;
            }
            &::after {
                animation: clippath 3s infinite -1.5s linear;
            }
            @keyframes clippath {
              0%,
              100% {
                  clip-path: inset(0 0 98% 0);
              }
              25% {
                  clip-path: inset(0 98% 0 0);
              }
              50% {
                  clip-path: inset(98% 0 0 0);
              }
              75% {
                  clip-path: inset(0 0 0 98%);
              }
            }
          }
          .info{
            flex:1 auto;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-right: 5px;
            box-sizing: border-box;
            .title{
              width:100%;
              height: 26px;
              line-height: 16px;
              font-size: 16px;
              font-weight: bold;
              border-bottom: 1px solid #ebebeb;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .content{
              color: #999999;
              font-size: 14px;
              height: 48px;
              line-height: 24px;
            }
            .date-view{
              width:100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              &>div{
                display: flex;
                align-items: center;
                color: #999999;
                &>i{
                  margin-right: 4px;
                  font-size: 14px;
                  line-height: 14px;
                }
                &>span{
                  font-size: 12px;
                  line-height: 14px;
                }
              }
            }
          }
          .img{
            flex:0 90px;
            height: 90px;
            border-radius: 50%;
            border:1px solid #999999;
          }
        }
        .fix-item{
          width:300px;
          height: 0;
        }
      }
    }
  }
}
</style>
